<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口</title>
    <link th:href="@{/css/mobile.css}" rel="stylesheet">
    <style>
    </style>
    <script type="text/javascript" th:src="@{/script/jquery-1.7.2.js}"></script>
    <Script type="text/javascript">
        $(function () {
            // 给加入购物车按钮绑定单击事件
            $("button.btn-addToCart").click(function () {
                var foodId = $(this).attr("foodId");
                var userId = $(this).attr("userId");
                // 发ajax请求，添加商品到购物车
                console.log("触发按钮");
                $.getJSON("/addItem", "action=ajaxAddItem&foodId=" + foodId + "&userId=" + userId);
            });
        });
    </Script>
</head>
<body>
<div th:each="food:${foods}" th:if="${food.getStatus()}=='able'" class="right-list" style="font-size: calc(8px + 2vh)">
    <img style="width: 12vh; height: 12vh; position: absolute;top: 3.5vh;left: 1vw" th:src="@{/img/food.png}">
    <p style="margin: 0;position: absolute;display: block;left: calc(12vh + 2vw);top: 3.5vh" th:text="${food.getName()}"></p>
    <p style="margin: 0;position: absolute;display: block;left: calc(12vh + 2vw);top: 8vh" th:text="${food.getPrice()}"></p>

    <button th:foodId="${food.getId()}" th:userId="${session.userInfo.getId()}" th:if="${session.userInfo}"
            class="btn-addToCart">加购
    </button>
</div>
</body>
</html>